<template>
  <div>
    <div>根据门锁Id查询门锁TCP日志（当前默认查询000001的TCP日志）</div>
    <div >
      <a-auto-complete
        v-model="id"
        :data-source="dataSource"
        placeholder="门锁ID"
        @search="onSearch"
        @change="onChange"
        class="lock-id"
      />
      <a-button type="primary" @click="getTcpLoggers">查询</a-button>
    </div>
    <div style="margin-bottom: 16px">
      <span style="margin-left: 8px">
        <template v-if="hasSelected">
        </template>
      </span>
    </div>
    <a-table
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      :columns="columns"
      :data-source="loggerData"
      :pagination="pagination"
    />
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      id: "000001",
      loggerData: [],
      columns: [
        {
          title: "设备ID",
          dataIndex: "identityId",
        },
        {
          title: "时间",
          dataIndex: "createTime",
        },
        {
          title: "内容",
          dataIndex: "log",
        },
      ],
      pagination: {
        defaultPageSize: 10,
        showTotal: (total) => `共 ${total} 条数据`,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50"],
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize),
      },
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      inputVal: "",
      dataSource: [],
      idData:[]
    };
  },
  watch:{
    // 输入改变改变之后
    // id(v){
    //   console.log('value', v);
    // }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  mounted() {
    this.getLockId();
    this.getTcpLoggers(this.id);
  },
  methods: {
    async getLockId(){
      const data = {
        username: this.$_cookie.getCookie('user')
      }
      const res = await this.$_api.getLockByUsername(data);
      const idArr = res.data.data.list;
      idArr.forEach(item => {
        this.idData.push(item.identityId)
      });
      
    },
    async getTcpLoggers() {
      const data = {
        identityId: this.id,
        current: 1,
        limit: 10000,
      };
      const res = await this.$_api.getTcpLoggers(data);
      if (res.data.success) {
        this.loggerData = res.data.data.list.records.reverse();
      } else {
        this.$message.info("请求超时，请重试！");
      }
    },
    start() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.selectedRowKeys = [];
      }, 1000);
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },

    // 自动填充
    onSearch(searchText) {
      this.dataSource = this.idData;
      let reg = RegExp(this.id);
      this.dataSource = [];
      this.idData.forEach(item => {
        if(reg.exec(item)){
          this.dataSource.push(item);
        }
      });
    },
    // onSelect(value) {
    //   console.log('onSelect', value);
    // },
    // input改变的时候
    onChange(value) {
      // console.log('onChange', value);
      this.dataSource = this.idData;
      let reg = RegExp(this.id);
      this.dataSource = [];
      this.idData.forEach(item => {
        if(reg.exec(item)){
          this.dataSource.push(item);
        }
      });
    },
  },
};
</script>
<style scoped>
.lock-id {
  width: 200px;
  margin: 20px 20px 0 0;
  display: inline-block;
}
</style>
